<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <div class="form-title">添加考勤设备</div>
            <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="88px" class="form">
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">基础设备信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="设备定位" prop="sPosition">
                                    <el-input v-model="dataForm.sPosition" placeholder="请输入设备定位" :maxlength="20" style="width:95%;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="1">
                                <span class="note">命名规则：打卡/机器类型+使用地点或人群,例如：接送机-正门</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="类别" prop="sDeviceTypeId">
                                    <el-select v-model="dataForm.sDeviceTypeId" placeholder="请选择" style="width:95%" @change="changeDeviceType">
                                    <el-option v-for="item in dataForm.sDeviceTypeIdList" :key="item.pId" :label="item.sName" :value="item.pId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备类型" prop="fDeviceId">
                                    <el-select v-model="dataForm.fDeviceId" placeholder="请选择" style="width:95%" @change="changefDevice">
                                        <el-option v-for="item in dataForm.fDeviceIdList" :key="item.pId" :label="item.sName" :value="item.pId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="提供厂商" prop="sManufactorId">
                                    <el-select v-model="dataForm.sManufactorId" placeholder="请选择" style="width:95%">
                                        <el-option v-for="item in dataForm.sManufactorList" :key="item.pId" :label="item.sName" :value="item.pId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备ID" prop="sNumber">
                                    <el-input v-model="dataForm.sNumber" placeholder="请输入设备ID" :maxlength="20" style="width:95%;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div v-if="tempStatus == 1">
                            <el-row :gutter="21">
                                <el-col :span="12">
                                    <el-form-item label="学校ID" prop="schoolCode">
                                        <el-input v-model="dataForm.schoolCode" placeholder="请输入学校ID" :maxlength="10" style="width:95%;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="KEY" prop="key">
                                        <el-input v-model="dataForm.key" placeholder="请输入KEY" :maxlength="50" style="width:95%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">关联学校</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="学校名称" prop="schoolName">
                                    <school v-model="dataForm.schoolName" style="width:95%" @getSchoolInfor="getSchoolInfor"></school>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="schoolStatus == 1 && schoolType=='0'">
                                <el-form-item label="关联年级" prop="grade">
                                    <el-select v-model="dataForm.grade" placeholder="请选择" style="width:95%;" @change="queryAllClass">
                                        <el-option v-for="item in gradeList" :key="item.pId" :label="item.sName" :value="item.pId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="schoolStatus == 2 && schoolType=='0'">
                                <el-form-item label="关联年级">
                                    <el-select v-model="dataForm.grade" placeholder="请选择" style="width:95%;" @change="queryAllClass">
                                        <el-option v-for="item in gradeList" :key="item.pId" :label="item.sName" :value="item.pId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12" v-if="schoolStatus == 1">
                                <el-form-item label="关联班级" prop="classId">
                                    <el-select ref="sel2" v-model="dataForm.classId" placeholder="请选择" style="width:95%;">
                                        <el-option v-for="item in classList" :key="item.classId" :label="item.className" :value="item.classId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="schoolStatus == 2">
                                <el-form-item label="关联班级">
                                    <el-select ref="sel2" v-model="dataForm.classId" placeholder="请选择" style="width:95%;">
                                        <el-option v-for="item in classList" :key="item.classId" :label="item.className" :value="item.classId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm('dataForm')">返 回</el-button>
                                <el-button type="primary" @click="submitForm('dataForm')" :loading="loadingBtn">保 存</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
// import { isEmpty } from 'utils/validate';
import Levelbar from '../layout/Levelbar';
import { saveDevice, getClassIdByName, getTypeNameByClassId, getManufactorById } from 'api/attendanceManage';
import {getGrade, getClass} from 'api/studentMange';
import school from 'components/SchoolClasss/school';
import { mapGetters } from 'vuex';

export default {
    name: 'addAttendance',
    components: { Levelbar, school},
    data() {
        var judgeSchoolName = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请输入学校名称'));
            } else if (this.dataForm.schoolId == '') {
                callback(new Error('学校不存在'));
            } else {
                callback();
            }
        };
        return {
            loading: false,
            tempStatus: 0,
            schoolStatus: 3,
            loadingBtn: false,
            schoolType: '0',
            gradeList: [], // 年级列表
            classList: [], // 班级列表
            dataForm: {
                // 基础设备信息
                sPosition: '', // 设备定位
                sDeviceTypeId: '', // 设备类别
                sDeviceTypeIdList: [],
                sDeviceName: '',
                sDeviceType: '',
                fDeviceId: '', // 设备类型名字
                fDeviceIdList: [],
                sManufactor: '', // 厂商
                sManufactorList: [],
                sManufactorId: '',
                sNumber: '', // 设备ID
                schoolCode: '', // 学校code
                key: '', // KEY
                // 关联学校
                schoolName: '', // 学校名字
                schoolId: '',   // 学校id               
                grade: '', // 年级
                classId: '' // 班级
            },
            rules: {
                schoolName: [
                    { required: true, validator: judgeSchoolName }
                ],
                sPosition: [
                    { required: true, message: '请输入设备定位', trigger: 'blur' }
                ],
                sDeviceTypeId: [
                    { required: true, message: '请选择类型', trigger: 'change' }
                ],
                fDeviceId: [
                    { required: true, message: '请选择设备类别', trigger: 'change' }
                ],
                sManufactorId: [
                    { required: true, message: '请选择提供厂商', trigger: 'change' }
                ],
                sNumber: [
                    { required: true, message: '请输入设备ID', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'},
                    { pattern: /^[0-9a-zA-Z]*$/, message: '设备ID只能是数字或字母', trigger: 'blur'}
                ],
                schoolCode: [
                    { required: true, message: '请输入学校ID', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'},
                    { pattern: /^[0-9]*$/, message: '学校ID只能是数字', trigger: 'change'}
                ],
                key: [
                    { required: true, message: '请输入KEY', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'},
                    { pattern: /^[0-9a-zA-Z]*$/, message: 'KEY只能是数字或字母', trigger: 'blur'}
                ],
                grade: [
                    { required: true, message: '请选择关联年级', trigger: 'change' }
                ],
                classId: [
                    { required: true, message: '请选择关联班级', trigger: 'change' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters(['uid'])
    },
    created() {
        this.getClassId();
    },
    methods: {
        submitForm(dataForm) {
            this.$refs[dataForm].validate(valid => {
                if (valid) {
                    this.$confirm('确定要保存吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        let obj1 = this.dataForm.sDeviceTypeIdList.find((item) => {
                            return item.pId == this.dataForm.sDeviceTypeId;
                        });
                        this.dataForm.sDeviceName = obj1.sName;
                        let obj2 = this.dataForm.fDeviceIdList.find((item) => {      
                            return item.pId == this.dataForm.fDeviceId;
                        });
                        this.dataForm.sDeviceType = obj2.sName;
                        let obj3 = this.dataForm.sManufactorList.find((item) => {
                            return item.pId == this.dataForm.sManufactorId;
                        });
                        this.dataForm.sManufactor = obj3.sName;
                        saveDevice(this.dataForm.schoolId, this.dataForm.grade, this.dataForm.classId, this.dataForm.sNumber, this.dataForm.fDeviceId,
                        this.dataForm.sDeviceType, this.dataForm.sDeviceTypeId, this.dataForm.sDeviceName, this.dataForm.sManufactorId, this.dataForm.sManufactor,
                        this.dataForm.sPosition, this.dataForm.schoolCode, this.dataForm.key).then(res => {
                            this.$store.dispatch('UpdateCache');// 添加
                            this.$message.success('保存成功');
                            window.history.back();
                        })
                    })
                }

            });
        },
        resetForm(dataForm) {
            window.history.back();
        },
        // schoolChange(val) {
            
        // },
        // 类别
        getClassId() {
            getClassIdByName().then(res => {
                this.dataForm.sDeviceTypeIdList = res.data.content;
                this.dataForm.sDeviceTypeIdList.unshift({
                    pId: '',
                    sName: '请选择'
                });
            })
        },
        // 改变类别
        changeDeviceType(id) {
            if (id=='') {
                this.dataForm.fDeviceId = '';
                this.dataForm.fDeviceIdList = [];
                return '';
            }
            getTypeNameByClassId(id).then(res => {
                this.dataForm.fDeviceIdList = res.data.content;
                this.dataForm.fDeviceIdList.unshift({
                    pId: '',
                    sName: '请选择'
                });
                this.dataForm.fDeviceId = '';
            })
        },
        // 改变设备类型
        changefDevice(id) {
            if (id=='') {
                this.schoolStatus = 3;
                this.dataForm.sManufactorId = '';
                this.dataForm.sManufactorList = [];
                return '';
            }
            if (id == '392715788890808321' || id == '392715788890808322') {
                this.tempStatus = 1;
            } else {
                this.tempStatus = 0;
            }
            if (id == '392715788890808325') {
                if (this.dataForm.schoolId) {
                    this.queryAllGrade();
                }
                this.schoolStatus = 1;
            } else if (id == '392715788890808324') {
                if (this.dataForm.schoolId) {
                    this.queryAllGrade();
                }
                this.schoolStatus = 2;
            } else {
                this.schoolStatus = 3;
            }
            getManufactorById(id).then(res => {
                this.dataForm.sManufactorList = res.data.content;
                this.dataForm.sManufactorList.unshift({
                    pId: '',
                    sName: '请选择'
                });
            })
        },
        getSchoolInfor(val) {
            this.dataForm.classId = '';
            this.classList = [];
            this.dataForm.schoolId = val.schoolId;
            if (val.schoolType=='0') {
                if (this.schoolStatus != 3 && this.dataForm.schoolId != '') {
                    this.schoolType = '0';
                    this.queryAllGrade();
                }
            } else {
                this.schoolType = '1';
                this.queryAllClass();
            }
            
        },
        // 年级列表
        queryAllGrade() {
            this.dataForm.grade = '';
            this.gradeList = [];
            getGrade(this.dataForm.schoolId).then(response => {
                this.gradeList = response.data.content;
                this.gradeList.unshift({
                    pId: '',
                    sName: '请选择'
                });
            })
        },
        // 班级列表
        queryAllClass(gradeId) {
            this.classList = [];
            this.dataForm.classId = '';
            getClass(gradeId, this.dataForm.schoolId).then(response => {
                this.classList = response.data.content;
                this.classList.unshift({
                    classId: '',
                    className: '请选择'
                });
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    .form-title {
      padding-top:8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .form {
      .form-item {
        padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
            // background: #30B08F url('../../../images/student/noteLavel.png') no-repeat 0 0;
          }
        }
        .form-content {
            margin: 0 8px;
        }
        .item {
          margin-bottom: 20px;
        }
        .back {
          margin-top: 20px;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 40px;
        }
        .title-way {
          padding-right: 15px;
        }
        .note{
            color: #999;
            font-size: 15px;
            line-height: 36px;
        }
        .control {
          text-align: right;
        }
      }
    }
  }
}
</style>